<template>
  <div class="container article-list">
    <div class="row">
      <div
        v-for="(article, index) in articleList"
        :key="'article' + index"
        class="col-12 mb-4">
        <article class="card article-card h-100 shadow">
          <div class="card-body">
            <div class="article-date">
              <span class="month">
                {{ showInitDate(article.createTime, 'month') }}月
              </span>
              <span class="day">
                {{ showInitDate(article.createTime, 'date') }}
              </span>
            </div>

            <h2 class="card-title">
              <router-link
                :to="`/article_detail?id=${+(article.id ?? 0)}`"
                class="text-decoration-none">
                {{ article.title }}
              </router-link>
            </h2>

            <div class="article-meta-header">
              <div class="meta-item">
                <i class="fa fa-calendar"></i>
                <span>
                  发表于 {{ showInitDate(article.createTime, 'all') }}
                </span>
              </div>
              <div class="meta-item">
                <span class="tag-java">java</span>
              </div>
              <div class="meta-item view-count">
                <i class="fa fa-eye"></i>
                <span>{{ article.viewCount }} 次围观</span>
              </div>
            </div>

            <p class="card-text article-summary">
              {{ article.summary }}
            </p>

            <div
              v-if="(article.thumbnail?.trim().length ?? 0) > 0"
              class="article-thumbnail">
              <img
                :src="article.thumbnail"
                :alt="article.title"
                class="img-fluid rounded" />
            </div>
            <div v-else>
              <img
                src="@/assets/images/zhanwei.jpg"
                :alt="article.title"
                class="img-fluid rounded"
                style="object-fit: fill" />
            </div>

            <div class="card-footer">
              <router-link
                :to="`/article_detail?id=${+(article.id ?? 0)}`"
                class="read-more">
                <span class="text">阅读全文</span>
                <el-icon class="icon"><ArrowRight /></el-icon>
              </router-link>
            </div>
          </div>
        </article>
      </div>
    </div>

    <div
      class="text-center mt-4 mb-5"
      style="margin: 20px auto; text-align: center">
      <button
        v-if="hasMore"
        class="btn btn-outline-primary px-4"
        :disabled="loading"
        @click="loadMore">
        <template v-if="loading">
          <span class="loading-spinner"></span>
          加载中...
        </template>
        <template v-else>加载更多</template>
      </button>
      <div v-else class="no-more-wrapper">
        <div class="no-more-content">
          <span class="no-more-text">
            <i class="fas fa-inbox"></i>
            没有更多文章了
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import ArticleApi, { ArticleDto, ArticleVo } from '@/api/article'
import { showInitDate } from '@/utils/server'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const pageRequest = ref<ArticleDto>({
  pageNum: 1,
  pageSize: 10,
  categoryId: route.query.classId ? +route.query.classId : 0,
})

const hasMore = ref(true)
const loading = ref(false)
const articleList = ref<Array<ArticleVo>>([])

const fetchArticles = async () => {
  try {
    loading.value = true
    const res = await ArticleApi.getArticleList(pageRequest.value)
    articleList.value = [...articleList.value, ...(res.items ?? [])]
    hasMore.value = +res.total > articleList.value.length
  } catch (error) {
    console.error('Failed to fetch articles:', error)
  } finally {
    loading.value = false
  }
}

const loadMore = async () => {
  pageRequest.value.pageNum++
  await fetchArticles()
}

onMounted(() => {
  fetchArticles()
})

watch(
  () => route.query.classId,
  (newClassId) => {
    pageRequest.value.categoryId = newClassId ? +newClassId : 0
    pageRequest.value.pageNum = 1
    articleList.value = []
    fetchArticles()
  }
)
</script>

<style lang="scss" scoped>
.article-list {
  margin-top: 2rem; // 增加顶部间距

  .article-card {
    margin-top: 16px;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    border: none;
    background: #ffffff;
    border-radius: 12px; // 增加圆角
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
    }

    .card-body {
      padding: 1.5rem 1.5rem 0 1.5rem; // 增加内边距
    }
    .card-footer {
      padding: 1rem 0rem;
      background: transparent;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: flex-end;

      .read-more {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1.2rem;
        color: var(--el-color-primary);
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 20px;
        background: rgba(var(--el-color-primary-rgb), 0.1);
        transition: all 0.3s ease;
        overflow: hidden;

        .text {
          position: relative;
          z-index: 1;
        }

        .icon {
          margin-left: 0.5rem;
          transition: transform 0.3s ease;
          position: relative;
          z-index: 1;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: var(--el-color-primary);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform 0.3s ease;
        }

        &:hover {
          color: white;
          box-shadow: 0 4px 8px rgba(var(--el-color-primary-rgb), 0.2);

          &::before {
            transform: scaleX(1);
            transform-origin: left;
          }

          .icon {
            transform: translateX(3px);
          }
        }
      }
    }
  }

  .article-date {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #0d6efd, #0dcaf0);
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 2; // 确保日期显示在最上层
    opacity: 1; // 确保始终显示
    transition: transform 0.3s ease;

    .month {
      display: block;
      font-size: 0.9rem;
      font-weight: 500;
      line-height: 1.2;
    }

    .day {
      display: block;
      font-size: 1.4rem;
      font-weight: 700;
      line-height: 1.2;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
  }

  .card-title {
    font-size: 1.5rem; // 调小标题字号
    margin-bottom: 1rem;
    padding-right: 100px; // 为日期留出空间
    font-weight: 600;
    line-height: 1.4;

    a {
      color: #333333;
      transition: color 0.2s ease;

      &:hover {
        color: #2196f3;
        text-decoration: none;
      }
    }
  }

  .article-meta-header {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    color: #666;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 0.4rem;

      i {
        color: #2196f3;
        font-size: 1rem;
      }
    }

    .tag-java {
      background: #2196f3;
      color: white;
      padding: 0.2rem 0.6rem;
      border-radius: 4px;
      font-size: 0.85rem;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: darken(#2196f3, 10%);
      }
    }

    .view-count {
      margin-left: auto; // 将浏览次数推到右边
    }
  }

  .article-summary {
    color: #666666;
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-indent: 0; // 移除首行缩进
  }

  .article-thumbnail {
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
    height: 240px; // 统一高度

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
      // 移除阴影相关样式

      &:hover {
        transform: scale(1.02); // 保留缩放效果
      }
    }

    // 占位图片也需要移除阴影
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      // 移除阴影相关样式
      box-shadow: none !important;
    }
    .img-fluid {
      height: 400px;
      box-shadow: none !important;
    }
  }

  // 加载更多按钮样式
  .btn-outline-primary {
    padding: 0.6rem 2rem;
    font-weight: 500;
    border-width: 2px;
    transition: all 0.2s ease;

    &:hover {
      transform: translateY(-2px);
    }

    &:disabled {
      opacity: 0.7;
    }
  }
}

.load-more-wrapper {
  text-align: center;
  margin: 3rem 0;

  .load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 2.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--el-color-primary);
    background: rgba(var(--el-color-primary-rgb), 0.1);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;

    &:hover:not(:disabled) {
      background: var(--el-color-primary);
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(var(--el-color-primary-rgb), 0.2);
    }

    &:disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }

    // 加载中状态
    .loading-spinner {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 2px solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

// 没有更多文章样式
.no-more-wrapper {
  margin-top: 2rem;
  padding: 2rem 0;
  text-align: center;

  .no-more-content {
    display: inline-flex;
    align-items: center;
    color: #909399;
    font-size: 0.95rem;

    &::before,
    &::after {
      content: '';
      height: 1px;
      width: 80px;
      background: linear-gradient(to right, transparent, #e0e0e0);
      margin: 0 15px;
    }

    &::after {
      background: linear-gradient(to left, transparent, #e0e0e0);
    }

    i {
      margin-right: 8px;
      font-size: 1.1rem;
      color: #c0c4cc;
    }
  }
}
</style>
